<template>
  <div style="text-align: center;">
    <span>上课学生</span>
    <!-- 学生筛选 -->
    <div>
      <el-form class="selectStudentForm" :inline="true" label-width="80px">
        <el-form-item label="所属院系">
          <el-select
            v-model="searchStudent.departmentId"
            @change="handleChangeDepartment"
            placeholder="请选择院系"
            size="small"
          >
            <el-option
              v-for="item in departmentList"
              :key="item.departmentId"
              :label="item.departmentName"
              :value="item.departmentId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属专业">
          <el-select
            v-model="searchStudent.majorId"
            placeholder="请选择专业"
            @change="handleChangeMajorAndEnrollmentYear"
            size="small"
          >
            <el-option
              v-for="item in DepartmentMajor"
              :key="item.majorId"
              :label="item.majorName"
              :value="item.majorId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form class="selectStudentForm" :inline="true" label-width="80px">
        <el-form-item label="年级">
          <el-select
            v-model="searchStudent.enrollmentYear"
            placeholder="请选择年级"
            @change="handleChangeMajorAndEnrollmentYear"
            size="small"
          >
            <el-option
              v-for="(item, index) in EnrollmentYear"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-select
            v-model="searchStudent.className"
            placeholder="请选择班级"
            size="small"
          >
            <el-option
              v-for="(item, index) in DepartmentMajorClass"
              :key="index"
              :label="item.className"
              :value="item.className"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            style="margin-left:10px;background-color: rgb(51, 55, 68);
                  color: white;
                  border: 0;"
            @click="submit"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 学生穿梭框 -->
    <div>
      <el-transfer
        style="text-align: left; display: inline-block;"
        v-model="StudentHavedBeAdded"
        :render-content="renderFunc"
        :titles="['所有学生', '已选中学生']"
        :button-texts="['删除', '添加']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}',
        }"
        @change="handleChange"
        :data="StudentToBeAdded"
      ></el-transfer>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchStudent: {
        studentId: null,
        name: null,
        departmentId: null,
        majorId: null,
        enrollmentYear: null,
        className: null,
      },

      departmentList: [],
      DepartmentMajor: [],
      EnrollmentYear: [],
      DepartmentMajorClass: [],
      //待添加的学生列表
      StudentToBeAdded: [],
      // 已添加的学生列表
      StudentHavedBeAdded: [],
      //显示格式
      renderFunc(h, option) {
        return (
          <span>
            {option.key} - {option.label}
          </span>
        );
      },
    };
  },
  methods: {
    //提交查找
    submit() {
      let options = this.searchStudent;
      this.$http.post(this.$api.StudentSearchInfo, options).then((resp) => {
        if (resp.success) {
          this.StudentToBeAdded = []; //先清空
          for (let index in resp.data) {
            //渲染学生列表
            this.StudentToBeAdded.push({
              key: resp.data[index].studentId,
              label: resp.data[index].name,
            });
          }
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    //返回院系列表
    returnDepartment() {
      this.$http.get(this.$api.InfoDepartment).then((resp) => {
        if (resp.success) {
          this.departmentList = resp.data;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    //返回年级列表
    returnEnrollmentYear() {
      this.$http.get(this.$api.InfoEnrollmentYear).then((resp) => {
        if (resp.success) {
          this.EnrollmentYear = resp.data.enrollmentYears;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    //返回班级列表
    returnClass() {
      let options = {
        majorId: this.searchStudent.majorId,
        enrollmentYear: this.searchStudent.enrollmentYear,
      };
      this.$http
        .post(this.$api.InfoDepartmentMajorClass, options)
        .then((resp) => {
          if (resp.success) {
            this.DepartmentMajorClass = resp.data;
          } else {
            this.$handleFailResp(this, resp);
          }
        });
    },
    //返回专业
    returnDepartmentMajor() {
      let departmentId = this.searchStudent.departmentId;
      let options = { departmentId: departmentId };
      this.$http.post(this.$api.InfoDepartmentMajor, options).then((resp) => {
        if (resp.success) {
          this.DepartmentMajor = resp.data;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    // 级联，处理院系选中
    handleChangeDepartment(value) {
      this.returnDepartmentMajor();
      this.searchStudent.majorId = null;
      this.searchStudent.enrollmentYear = null;
      this.searchStudent.className = null;
    },
    // 级联，处理专业和入学年份选中
    handleChangeMajorAndEnrollmentYear(value) {
      if (
        this.searchStudent.majorId != null &&
        this.searchStudent.enrollmentYear != null
      ) {
        this.returnClass();
        this.searchStudent.className = null;
      }
    },

    //
    handleChange(value, direction, movedKeys) {
      // console.log(value, direction, movedKeys);
      // console.log(this.StudentHavedBeAdded)
    },
  },
  mounted() {
    this.returnDepartment();
    this.returnEnrollmentYear();
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-input {
  width: 180px;
}
.selectStudentForm {
  width: 640px;
  height: 50px;
  margin: auto;
  text-align: left;
  padding-left: 70px;
}

.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}

// 这个是改变外边框的宽高
/deep/ .el-transfer-panel {
  width: 260px;
  height: 350px;
}

//这个是用来改变显示内容的高度
/deep/ .el-transfer-panel__list {
  height: 350px;
}

/deep/ .el-transfer__buttons {
  padding: 0 5px;
}
/deep/ .el-button {
  // background-color: rgb(51, 55, 68);
  border: 0;
  padding: 8px;
}
</style>
